<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>目录上传</title>
</head>

<body>
  <div>
    <h1>Upload directories</h1>
    <input type="file" id="file-uploader" webkitdirectory />
    <ul id="pathList"></ul>
  </div>
</body>
<script>
  /*
  我们可以上传整个目录吗？好吧，这是可能的，但有一些限制。
  有一个叫做 webkitdirectory 的非标准属性（至少在写这篇文章的时候是这样），允许我们上传整个目录。
  虽然最初只针对基于WebKit的浏览器实现，但webkitdirectory也可以在Microsoft Edge以及Firefox 50和更高版本中使用。
  但是，即使它具有相对广泛的支持，它仍然不是标准的，除非您别无选择，否则不应该使用它。
  您可以将此属性指定为:
  <input type="file" id="file-uploader" webkitdirectory />
  用户必须提供确认信息才能上传目录，
  用户单击“Upload”按钮后，就会进行上传。这里要注意的重要一点：FileList 数组将以平面结构的形式包含有关上载目录中所有文件的信息。
  但关键是，对于每个 File 对象，webkitRelativePath 属性都会有目录路径。
  */

  const fileUploader = document.getElementById('file-uploader');
  const pathList = document.getElementById('pathList');

  function removeAllChildNodes(parent) {
    while (parent.firstChild) {
      parent.removeChild(parent.firstChild);
    }
  }

  fileUploader.addEventListener('change', (event) => {
    const files = event.target.files;
    console.log('files', files);

    removeAllChildNodes(pathList);

    [...files].forEach((file, index) => {
      let path = document.createElement('li');
      path.innerHTML = file.webkitRelativePath;
      pathList.appendChild(path);
    });
  });
</script>

</html>